<template>
  <div class="inline-flex">
    <a-dropdown :trigger="['hover']">
      <a-avatar shape="square" :size="32" icon="user" />
      <a-menu slot="overlay">
        <a-menu-item key="0">
          <a>个人中心</a>
        </a-menu-item>
        <a-menu-item key="1">
          <a @click="handleOpenLayout">布局设置</a>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="3"> 退出登录 </a-menu-item>
      </a-menu>
    </a-dropdown>

    <a-drawer placement="right" :visible="visible" @close="onCloseLayout">
      <!-- 页面样式风格 -->
      <div>
        <h5 class="text-gray-800">页面样式风格</h5>

        <ul class="flex gap-x-3 mt-3">
          <li
            v-for="item in pageStyles"
            :key="item.icon"
            class="relative"
            :class="{ checked: item.id === pageStyle }"
            @click="changePageStyles(item)"
          >
            <div class="text-[48px]">
              <svg-icon :icon-class="item.icon"></svg-icon>
            </div>
            <div
              v-if="item.id === pageStyle"
              class="absolute inset-0 pt-3 pl-6"
            >
              <a-icon type="check" class="text-blue-500" />
            </div>
          </li>
        </ul>
      </div>

      <!-- 导航栏风格 -->
      <div class="mt-8">
        <h5 class="text-gray-800">页面样式风格</h5>

        <ul class="flex gap-x-3 mt-3">
          <li
            v-for="item in navsStyles"
            :key="item.icon"
            class="relative"
            :class="{ checked: item.id === navStyle }"
            @click="changeNavsStyles(item)"
          >
            <div class="text-[48px]">
              <svg-icon :icon-class="item.icon"></svg-icon>
            </div>
            <div v-if="item.id === navStyle" class="absolute inset-0 pt-3 pl-6">
              <a-icon type="check" class="text-blue-500" />
            </div>
          </li>
        </ul>
      </div>

      <!-- 导航栏风格 -->
      <div class="mt-8">
        <h5 class="text-gray-800">页面样式风格</h5>

        <ul class="flex gap-x-3 mt-3">
          <li
            v-for="color in DEFAULT_THEME_COLORS"
            :key="color"
            class="relative"
            :class="{ checked: color === theme }"
            @click="changeThemeStyle(color)"
          >
            <div
              class="w-[20px] h-[20px]"
              :style="{ backgroundColor: color }"
            ></div>
            <div
              v-if="color === theme"
              class="absolute inset-0 flex flex-col justify-center items-center"
            >
              <a-icon type="check" class="text-white" />
            </div>
          </li>
        </ul>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { PageStyle, NavStyle, DEFAULT_THEME_COLORS } from '@/constants'
import { changeThemeColor } from '@/utils/theme'

export default {
  data() {
    return {
      visible: false,
      pageStyles: [
        { id: PageStyle.white, icon: 'layout-1', checked: true },
        { id: PageStyle.whiteAndBlack, icon: 'layout-4', checked: false },
        { id: PageStyle.black, icon: 'layout-3', checked: false },
      ],
      navsStyles: [
        { id: NavStyle.left, icon: 'layout-4', checked: false },
        { id: NavStyle.top, icon: 'layout-2', checked: true },
      ],
      DEFAULT_THEME_COLORS,
    }
  },
  computed: {
    ...mapState({
      theme: (state) => state.admin.theme,
      pageStyle: (state) => state.admin.pageStyle,
      navStyle: (state) => state.admin.navStyle,
    }),
  },
  watch: {
    theme: {
      handler(mainColor) {
        // 加入try-catch的目的是为了，避免在服务端执行的时候保document is not defined!
        try {
          changeThemeColor(mainColor)
        } catch (error) {}
      },
      immediate: true,
    },
  },
  methods: {
    ...mapMutations({
      SET_PAGESTYLE: 'admin/SET_PAGESTYLE',
      SET_NAVSTYLE: 'admin/SET_NAVSTYLE',
      SET_THEME: 'admin/SET_THEME',
    }),
    handleOpenLayout() {
      this.visible = true
    },
    onCloseLayout() {
      this.visible = false
    }, // 选中Page样式
    changePageStyles(row) {
      this.SET_PAGESTYLE(row.id)
    },
    // 选中Navs样式
    changeNavsStyles(row) {
      this.SET_NAVSTYLE(row.id)
    },
    // 设置主题色
    changeThemeStyle(color) {
      this.SET_THEME(color)
    },
  },
}
</script>
